<template>
  <div>
    <!--    <button @click="getPos">getPos</button>-->
    <Button @click="getPos">获取位置</Button>
    位置：{{ location_lon }} {{ location_lat }}
    街道：{{ street }}
  </div>
</template>

<script>
import axios from "axios";
import Home from "../views/Home.vue";

export default {
  name: "getlocation",
  data() {
    return {
      location_lon: '',
      location_lat: '',
      street: ''
    }
  },
  methods: {

    setPos(){
      var lon,lat
      var _this = this
      navigator.geolocation.getCurrentPosition(function (position){
        _this.location_lon = position.coords.longitude
        _this.location_lat = position.coords.latitude
        // console.log(this.location_lon)
      })
      this.axios({
        method: "get",
        url: "/api/testGetApi?location="+this.location_lat+","+this.location_lon
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            // 成功通知
            // console.log(resp.data.data.result.formatted_address);
            this.street=resp.data.data.result.formatted_address
            this.reload()

          }
        }
      })
      this.reload()

    },
    getPos() {

      // https://api.map.baidu.com/reverse_geocoding/v3/?ak=IfsMrMz9Bppa40oa6dkhNnMKTMl2T8nN&output=json&coordtype=wgs84ll&location=30.330,107.322
      this.axios({
        method: "get",
        url: "/api/testGetApi?location="+this.location_lat+","+this.location_lon
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            // 成功通知
            // console.log(resp.data.data.result.formatted_address);
            this.street=resp.data.data.result.formatted_address
          }
        }
      })


    },
  },

  created() {
    this.setPos()
    this.reload()

  }
}
</script>

<style scoped>

</style>
